<polymer-element name="g-checkbox" extends="input" attributes="title">
  <style polymer-scope="global">
    input[is="g-checkbox"] {
      -webkit-appearance: none;
      height: 24px;
      width: 24px;
      border-radius: 2px;
      border: 1px solid rgba(0,0,0,0.05);
      background-color: rgba(0, 0, 0, 0.15);
      box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset, 0 1px 0 rgba(255,255,255,0.2);
      margin: 9px 8px;
    }
    input[is="g-checkbox"]:checked {
      background-image: url(images/dark_check.png);
      background-size: 100% 100%;
      background-position: center center;
    }
    input[is="g-checkbox"]::after {
      position: relative;
      left: 42px;
      color: #333;
      font-size: 12pt;
      content: attr(title);
    }
  </style>
  <script>
    Polymer('g-checkbox', {
      ready: function() {
        this.setAttribute('type', 'checkbox');
      }
    });
  </script>
</polymer-element>
